<template>
  <!-- 云存储 -->
  <view class="bg-white" :class="modalName ? 'prevents' : ''">
    <!-- 主体内容 -->
    <view class="padding">
      <!-- 标题 -->
      <view v-if="!isIntroduceDetail">
        <view class="text-xl text-primary">人脸检测</view>
        <view class="text-primary text-sm margin-tb-xs">快速识别人脸，提供人脸安防服务人脸算法多用于家庭或商业场景，更具人脸提供人员识别、家人提醒、人员黑白名单等功能</view>
      </view>
      <!-- 支持开通的设备列表 -->
      <device-list v-if="!isIntroduceDetail" :supportDeviceObj="supportDeviceObj"
                   @click="handleSelectDevice"></device-list>
      <!-- logo -->
      <image :src="'https://statics.xmcsrv.net/weixin/cloud/xmcAisRecface/zh/logo.png'" style="width:100%;" mode="widthFix"></image>
      <!-- 广告 -->
      <ads :isShowTitle="false" :isShowClassify="false" title="" :list="adList" pathName="xmcAisRecface"></ads>
      <channels-modal :modalName="modalName" :info="buttonMessage.channelMessage"
                      @hideModal="hideModal"></channels-modal>

    </view>
    <!-- 按钮 -->
    <buttons v-if="buttonMessage.fail" :classifyId="classifyId" :message="buttonMessage.message"
             :channelMessage="buttonMessage.channelMessage"></buttons>
    <!--		<view>{{ classifyId }} &#45;&#45; {{buttonMessage.message}} &#45;&#45; {{buttonMessage.channelMessage}}</view>-->
  </view>
</template>

<script>
import {getDevice} from './mixins'
import channelsModal from "../components/modal/channels"
import couponModal from "../components/modal/coupon"
import buttons from './module/buttons/buttons'
import ads from './module/ads/ads'
import deviceList from './module/deviceList/deviceList'

export default {
  mixins: [getDevice],
  props: {
    deviceInfo: {
      type: Object,
      default: () => {
        return {
          modalName: null
        }
      }
    }
  },
  components: {
    deviceList,
    buttons,
    ads,
    couponModal,
    channelsModal
  },
  data() {
    return {
      isIntroduceDetail: false,
      adList: [
        {
          col: 3, list: [
            {
              url: 1,
              title: '人脸自定义',
              text: ''
            },
            {
              url: 2,
              title: '',
              text: ''
            },
            {
              url: 3,
              title: '',
              text: ''}
          ]
        },
        {
          col: 3, list: [
            {
              url: 4,
              title: '人脸记录',
              text: ''
            },
            {
              url: 5,
              title: '',
              text: ''
            },
            {
              url: 6,
              title: '',
              text: ''}
          ]
        },
        {
          col: 1, list: [
            {url: 7, title: '陌生人', text: ''},
          ]
        },
      ],
    }
  },
  onLoad(opt) {

  },
  mounted() {
    if (this.deviceInfo) {
      this.modalName = this.deviceInfo.modalName
      this.isIntroduceDetail = this.deviceInfo.isIntroduceDetail
    }
  },
  onShow() {
    const pointData = {code: '600401', eventName: 'click_item_home_cloud'}
    this.$postPointData(pointData)
  },
  methods: {
    channelClick() {
      this.modalName = 'channelsModal'
    },
    hideModal() {
      this.modalName = ''
    }
  }
}
</script>

<style lang="less" scoped>
@import '@/common/style/main.css';
</style>
